<#include "/main.ftl"/>
<link rel="stylesheet" href="${base}/lib/mergely-3.3.3/css/codemirror.css" type="text/css">
<link rel="stylesheet" href="${base}/lib/mergely-3.3.3/css/mergely.css" type="text/css">
<body>
<@diamondNav/>
<div id="content" style="margin-left: 13%">
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body" style="padding:2px">
                <form id="formSearch" class="form-horizontal">
                    <div class="" style="margin-top:15px">
                        <div class="" style="margin-top:15px">
                            <label class="control-label col-sm-1" for="testCaseName">用例名称</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="testCaseName">
                            </div>

                            <div class="col-sm-4" style="text-align:left;">
                                <button type="button" style="margin-left:50px" id="btn_query" class="btn  btn-success btnFont">
                                    查询
                                </button>
                                <button type="button" style="margin-left:50px" id="btn_back" class="btn  btn-success btnFont">
                                    返回
                                </button>
                            </div>
                        </div>
                </form>

            </div>
        </div>

        <div id="toolbar" class="btn-group">

        </div>
        <table id="dataTable"></table>
    </div>
    <div style="margin-top: 30%;position: absolute">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="height:80%">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">结果对比</h4>
                    </div>
                    <div class="modal-body">
                        <div id="compare"></div>
                    </div>
                    <div class="modal-footer">
                        <#--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
    <input  type="hidden" name="interfaceId" id="interfaceId" value="${interfaceId!}">
    <input  type="hidden" name="buildTestId" id="buildTestId" value="${buildTestId!}">
</div>
</body>
<style>
    .modal-dialog {
        margin: 80px auto;
        width: 80%;
        height: 900px;
    }
</style>
<script type="text/javascript" src="${base}/lib/mergely-3.3.3/js/codemirror.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/lib/mergely-3.3.3/js/mergely.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/lib/mergely-3.3.3/js/searchcursor.js" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#alertMsg").hide();
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
    });
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#dataTable').bootstrapTable({
                url: '/testPlanController/getTestCase',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: false,
                showColumns: false,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 550,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",        //每一行的唯一标识，一般为主键列
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [
                    {
                        field: 'testCaseName',
                        title: '用例名称'
                    },
                    {
                        field:"status",
                        title:"状态",
                        formatter:function(value){
                            var s;
                            if(value ==1){
                                s="<img src='/images/status/green.gif/'>通过";
                            }else {
                                s="<img src='/images/status/red.gif/'>失败";
                            }
                            return s;
                        }
                    },
                    {
                        field: 'paramKeyValue',
                        title: 'keyValue入参'
                    },{
                        field: 'paramValue',
                        title: 'body入参'
                    },
                    {
                        field: 'errorMsg',
                        title: '异常信息'
                    },
                    {
                            field:"Button",
                                    title:"结果对比",
                                    formatter: function (value, row, index) {
                                var id = row.buildTestCaseId;
                                var result = "";
                                result += "<a onclick=\"diff('" + id + "')\" title='对比结果'> 对比结果 </a>";
                                return result;
                            }
                        }
                    , {
                        field: 'expectResult',
                        title: '预期结果',
                        formatter: function (value) {
                            var str;
                            if (null != value) {
                                str = value.replace(new RegExp("<", "g"), "&lt;").replace(new RegExp(">", "g"), "&gt;");
                            } else {
                                str = value;
                            }
                            return str;
                        }
                    }, {
                        field: 'actualResult',
                        title: '实际结果',
                        formatter: function (value) {
                            var str;
                            if (null != value) {
                                str = value.replace(new RegExp("<", "g"), "&lt;").replace(new RegExp(">", "g"), "&gt;");
                            } else {
                                str = value;
                            }
                            return str;
                        }
                    }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var interfaceId=$("#interfaceId").val();
            var buildTestId=$("#buildTestId").val();
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize: params.limit,   //页面大小
                pageNo: params.offset,  //页码
                buildTestId: buildTestId,
                interfaceId:interfaceId
            };
            return temp;
        };
        return oTableInit;
    };
    $("#btn_back").click(function(){
        window.location.href="/testPlanController/planPage?buildTestId="+$("#buildTestId").val();
    })
    $("#btn_query").click(function () {
        $("#dataTable").bootstrapTable('refresh');
    });
    function diff(buildTestCaseId) {
        var allTableData = $('#dataTable').bootstrapTable('getData');
        var expectResult;
        var actualResult;
        for(var i = 0; i < allTableData.length; i++) {
            //如果此行中有玩家名字（此处默认名字不重复）与你想获取的相同，则跳出循环，indexTemp是你要的行索引
            if(allTableData[i].buildTestCaseId == buildTestCaseId) {
                expectResult =allTableData[i].expectResult;
                actualResult =allTableData[i].actualResult;
                break;
            }
        }
        /**设置diff结果**/
        $('#compare').mergely({
            cmsettings: { readOnly: false, lineNumbers: true, editor_height: 950 },
            lhs: function (setValue) {
                /**设置预期结果**/
                setValue(expectResult);
            },
            rhs: function (setValue) {
                /**设置实际结果**/
                setValue(actualResult);
            }
        });
        $("#myModal").modal("show");
    }
</script>